<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    视口，调整页面适应移动端
                width=device-width：页面宽度与设备宽度一致
                initial-scale=1：初始缩放为1，即不会缩放
                minimum-scale=1：最小缩放比
                maximum-scale=1：最大缩放比
                user-scalable=no：用户自定缩放
        -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Title</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <style>
        .form-control {
            width: auto;
        }
    </style>
    <!--    如下第三方库的JS一般写在head标签中-->
    <script src="js/jquery-3.5.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
            1
        </label>
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
            2
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>